<template>
    <div class="app-container">
      医院设置列表
      <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.hosname" placeholder="医院名称"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchObj.hoscode" placeholder="医院编号"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
    </el-form>

    <!-- 工具条 -->
    <div>
      <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
    </div>

      <el-table
      :data="list"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <!--复选框-->
      <el-table-column type="selection" width="55"/>
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="hosname"
        label="医院名称">
      </el-table-column>
      <el-table-column
        prop="hoscode"
        label="医院编号">
      </el-table-column>
      <el-table-column
        prop="apiUrl"
        label="api基础路径">
      </el-table-column>
      <el-table-column
        prop="contactsName"
        label="联系人姓名">
      </el-table-column>
      <el-table-column
        prop="contactsPhone"
        label="联系人手机">
      </el-table-column>
      <el-table-column
        label="状态" width="80">
        <template slot-scope="scope">
          {{ scope.row.status === 1 ?'可用':'不可用'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini"
                     icon="el-icon-delete" @click="removeDataById(scope.row.id)">
          </el-button>
          <el-button type="primary"
                     @click="lockSet(
                       scope.row.id,
                       scope.row.status === 1 ? 0 : 1
                     )"
          >
            {{ scope.row.status === 1 ? '锁定' : '取消锁定' }}
          </el-button>
          <router-link :to="'/hospSet/edit/'+scope.row.id">
            <el-button type="primary">修改</el-button>
           </router-link>
         </template>
        </el-table-column>
    </el-table>
    <el-pagination
      :current-patge="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0;text-align: center;"
      layout="total,prev,pager,next,jumper"
      @current-change="getList"/>
    </div>
  </template>
  
  <script>
  import hospset from '@/api/hospset';
  export default {
    name: 'list',
    data() {
      return {
        current:1,
        limit:2,
        searchObj:{},
        list:[],
        total:0,
        delIds: [], //多个id值
      }
    },
    created(){
        this.getList()
    },
    methods: {
      //复选框发生改变后出发
        handleSelectionChange(val) {
         // console.log(val)
          this.delIds = val
        },
        getList(page=1){
          this.current =page
            hospset.getHospSetList(this.current,this.limit,this.searchObj)
            .then(response=>{
              this.list =response.data.records
              this.total=response.data.total
              //  console.log(response)
            })
            .catch(error=>{
                console.log(error)
            })
        },
        //锁定
      lockSet(id,status){
        this.$confirm('锁定/解锁信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async response => {
        //点击确定，执行下方代码
        hospset.lockHospSet(id,status)
        .then(response =>{
          this.getList()
        })
      })
      },
        //删除医院设置
        removeDataById(id){
          this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async response => {
        //点击确定，执行下方代码
          hospset.deleteHospSet(id)
          .then(response =>{
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //刷新
          this.getList(1)
          })
      })
      },
      //批量删除
      removeRows(){
        this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async response => {
         var idList=[]
         for(var i=0;i<this.delIds.length;i++){
          var obj = this.delIds[i]
          var id = obj.id
          idList.push(id)
          console.log(idList)
         }
        //点击确定，执行下方代码
          hospset.deleteBatchHospSet(idList)
          .then(response =>{
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //刷新
          this.getList(1)
          })
          .catch(error=>{
                console.log(error)
            })
      })
      }
    }
  }
  </script>